<template>
    <div>
        <!-- 用户列表 -->
        <h1>分类参数</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 注意提醒 -->
            <div class="waring"><el-tag type="warning" class="warig"><i class="el-icon-warning"></i>注意
                    :只允许第三级分类设置相关参数!</el-tag></div>
            <!-- 选择商品分类 -->
            <div class="wid">
                <div class="carts">
                    <span>选择商品分类:&emsp;</span>
                    <el-cascader :options="options" :props="props" clearable @change="handleChange"
                        placeholder="请选择"></el-cascader>
                </div>
            </div><br>

            <!-- 动静态属性 -->
            <div class="dynamic">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!-- 动态属性 -->
                    <el-tab-pane label="动态参数" name="second">
                        <el-button type="primary" :disabled="tableData.length == 0" class="btn"
                            @click="add('dt')">添加参数</el-button>


                        <feng :list="tableData" @handleDelete="handleDelete" @handleEdit="handleEdit" ></feng>

                    </el-tab-pane>



                    <!-- 静态属性 -->
                    <el-tab-pane label="静态属性" name="first">
                        <el-button type="primary" :disabled="tableData1.length == 0" class="btn"
                            @click="add('dts')">添加属性</el-button>

                       
                        <feng :list="tableData1" @handleDelete="handleDelete1" @handleEdit="handleEdit1" ></feng>


                    </el-tab-pane>
                </el-tabs>


            </div>
            <!-- 动态属性添加模态框 -->
            <el-dialog title="添加动态参数" class="text1" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
                <!-- 添加内容表单验证 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="动态参数" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm', 'edit')">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 动态属性修改模态框 -->
            <el-dialog title="修改动态参数" class="text1" :visible.sync="dialogVisible2" width="60%" :before-close="handleClose">
                <!-- 修改内容表单验证 -->
                <el-form :model="ruleForm" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="动态参数" prop="name">
                        <el-input v-model="ruleForm2.name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="submitForms('ruleForm2')">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 静态属性添加模态框 -->
            <el-dialog title="添加静态属性" class="textl" :visible.sync="dialogVisible1" width="60%" :before-close="handleClose">
                <!-- 内容表单验证 -->
                <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="静态属性" prop="name">
                        <el-input v-model="ruleForm1.name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm1('ruleForm1')">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 静态属性修改模态框 -->
            <el-dialog title="修改静态参数" class="text1" :visible.sync="dialogVisible3" width="60%" :before-close="handleClose">
                <!-- 修改内容表单验证 -->
                <el-form :model="ruleForm3" :rules="rules2" ref="ruleForm3" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="静态参数" prop="name">
                        <el-input v-model="ruleForm3.name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible3 = false">取 消</el-button>
                    <el-button type="primary" @click="submitFormedit('ruleForm3')">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 静态属性删除模态框 -->

        </el-card>
    </div>
</template>
<script>
import feng from '../components/feng'

import { cartlist, addCart, cartts, cartDel, cartEdit, addl } from '../request/Api'
export default {
    name: "Params",
    data() {
        return {
            // 添加动态表单判断
            ruleForm: {
                name: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入添加参数名称', trigger: 'blur' },
                ],
            },
            // 修改动态表单判断
            ruleForm2: {
                name: '',
            },
            // 静态修改表单
            ruleForm3: {
                name: '',
            },
            rules2: {
                name: [
                    // { required: true, message: '请输入修改参数名称', trigger: 'blur' },
                ],
            },
            // 添加静态表单判断
            ruleForm1: {
                name: '',
            },
            rules1: {
                name: [
                    { required: true, message: '请输入静态参数名称', trigger: 'blur' },
                ],
            },
            // 动态参数新建标签
            dynamicTags: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: '',
            // 动态属性添加模态框
            dialogVisible: false,
            // 动态属性修改模态框
            dialogVisible2: false,
            // 静态属性添加模态框
            dialogVisible1: false,
            // 静态修改框
            dialogVisible3: false,
            // 动态表格
            tableData: [
                // {
                //     arrt_name: '1'
                // }
            ],
            // 静态表格
            dynamicTags1: ['1'],
            inputVisible1: false,
            inputValue1: '',
            tableData1: [],
            // 静态表格----------------
            props: {
                label: 'cat_name',
                value: 'cat_id',
            },
            options: [],
            // 选择商品分类
            value: '',
            // 动静态属性
            activeName: 'second',
            lis: {
                type: [],
                // 当前页码
                pagenum: 1,
                // 每页显示多少条
                pagesize: 5,
            },
            id: null,
            // 修改id存储
            editID: 0,
            jingedit: 0
        }
    },
    created() {
        this.getlist()
    },
    components:{
        feng
    },
    methods: {
        // 动态表格新建标签
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },


        // 静态新建标签点击事件
        handleClose1(tag) {
            this.dynamicTags1.splice(this.dynamicTags1.indexOf(tag), 1);
        },

        // 静态表格新建标签
        showInput1() {
            this.inputVisible1 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm1() {
            let inputValue1 = this.inputValue1;
            if (inputValue1) {
                this.dynamicTags1.push(inputValue1);
            }
            this.inputVisible1 = false;
            this.inputValue1 = '';
        },
        handleClick1(tab, event) {
            console.log(tab, event);
        },

        // 同步数据渲染
        getlist() {
            cartlist().then(res => {
                // console.log(res.data.data);
                this.options = res.data.data
            })
        },

        // 动态参数渲染
        getTable() {
            cartts({
                id: this.id, params: {
                    sel: 'many'
                },
            }).then(res => {
                this.tableData = res.data.data
            })
        },
        // 静态参数渲染
        getTables() {
            cartts({
                id: this.id, params: {
                    sel: 'only'
                },
            }).then(res => {
                this.tableData1 = res.data.data
            })
        },
        // 静态态表格编辑
        handleEdit1(index, row) {
            console.log(index, row);
            this.jingedit = row
            console.log(this.jingedit);
            this.dialogVisible3 = true
            this.ruleForm3.name = row.attr_name
        },
        // 静态表格删除
        // handleDelete1(index, row) {
        //     // console.log(index, row);
        //     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         cartDel(row).then(res => {
        //             // console.log(res);
        //             this.getTables()
        //         })
        //         this.$message({
        //             type: 'success',
        //             message: '删除成功!'
        //         });
        //     }).catch(() => {
        //         this.$message({
        //             type: 'info',
        //             message: '已取消删除'
        //         });
        //     });
        // },
        handleDelete1(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                cartDel(row).then(res => {
                    this.getTables()
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 静态参数确定修改弹框
        submitFormedit() {
            let edits = {
                id: this.id,
                attrId: this.jingedit.attr_id,
                attr_name: this.ruleForm3.name,
                attr_sel: "only",
            }
            console.log(edits);
            cartEdit(edits).then(res => {
                console.log(res);
                this.getTables()
            })
            this.dialogVisible3 = false
        },
        // 点击后获取选择id
        handleChange(value) {
            // console.log(value);
            this.id = value[value.length - 1]
            // 列表数据渲染
            this.getTable()
            this.getTables()
        },
        // 动态参数表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let obj = {
                        id: this.id,
                        attr_name: this.ruleForm.name,
                        attr_sel: "many",
                    }
                    // console.log(obj);
                    addCart(obj).then(res => {
                        this.getTable()
                        this.dialogVisible = false
                    })
                }
            });
        },
        // 修改动态属性
        submitForms(formName2) {
            this.$refs[formName2].validate((valid1) => {
                if (valid1) {
                    // console.log(this.editID);
                    let edits = {
                        id: this.id,
                        attrId: this.editID.attr_id,
                        attr_name: this.ruleForm2.name,
                        attr_sel: "many",
                    }
                    cartEdit(edits).then(res => {
                        // console.log(res);
                        this.getTable()
                    })
                    this.dialogVisible2 = false
                }
                return false;
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 静态表单验证
        submitForm1(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible1 = false
                    let obj = {
                        id: this.id,
                        attr_name: this.ruleForm1.name,
                        attr_sel: "only",
                    }
                    console.log(obj);
                    addCart(obj).then(res => {
                        console.log(res);
                        this.getTables()
                        this.dialogVisible1 = false
                    })
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm1(formName) {
            this.$refs[formName].resetFields();
        },
        // 动态属性添加模态框

        //添加参数
        add(val) {
            if (val == 'dt') {
                //添加动态参数
                this.dialogVisible = true
                this.ruleForm.name = ''
            } else {
                // 添加静态参数
                this.dialogVisible1 = true
            }
        },
        // 动态表格编辑
        handleEdit(index, row) {
            // console.log(index, row);
            this.dialogVisible2 = true
            this.ruleForm2.name = row.attr_name
            this.editID = row
        },
        // 动态表格删除
        handleDelete(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                cartDel(row).then(res => {
                    this.getTable()

                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },



    }
}

</script>
<style lang="scss" scoped>
.textl {
    text-align: left;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.dynamic {
    .btn {
        // text-align: left;
        float: left;
    }
}

.waring {
    width: 90%;
    margin: 20px auto;
}

.box-card {
    width: 96%;
    margin: 20px auto;

    .wid {
        width: 100%;
        display: flex;

        .carts {
            justify-items: left;
            // margin-bottom: 20px;
        }
    }



    .waring {
        width: 100%;
    }

    .warig {
        width: 99%;
        margin: 20px auto;
        text-align: left;
    }
}
</style>